<script setup>
  import InputLabel from './InputLabel.vue'
  import Button from '../Button.vue'
  import FieldErrorMessage from './FieldErrorMessage.vue'
  import useFileUploadField from './composables/useFileUploadField'
  import { humanFileSize } from '../../helpers/utils'
  /**
   * Single Image Upload widget
   *
   * Displays less details than the FileUpload but shows a thumbnail
   */

  const props = defineProps({
    name: { type: String, required: true },
    label: { type: String, default: '' },
    downloadLabel: { type: String, default: 'Choisir un fichier' },
    editLabel: { type: String, default: 'Choisir un autre fichier' },
    deleteLabel: { type: String, default: 'Supprimer le fichier' },
    icon: { type: String, default: 'pen' },
    value: { type: Object || null, default: null },
    description: { type: String, default: '' },
    /* Url for the file action (when we click on the filename)*/
    fileUrl: { type: String || null, default: null },
    /* File informations as name, size */
    fileInfo: { type: Object || null, default: null },
    required: { type: Boolean || null, default: false },
    maxSize: { type: Number },
    deletePermission: { type: Boolean || null, default: true },
  })

  const emits = defineEmits(['changeValue', 'blurValue', 'unsetValue'])


  const {
    nameRef,
    tagId,
    currentFileInfo,
    fileInputRef,
    value,
    errorMessage,
    handleBlur,
    handleChange,
    meta,
    onPickFile,
    onFilePicked,
    onDeleteClicked,
  } = useFileUploadField(
    props,
    emits,
  )
</script>
<template>
  <div
    class="form-group File file-upload"
    :class="{ 'has-error': meta.touched && !!errorMessage }"
  >
    <InputLabel :tagId="tagId" :required="required" :label="label" />
    <div v-if="currentFileInfo" class="layout flex">
      <div class="file-preview">
        <a v-if="fileUrl" :href="fileUrl" title="Cliquer pour télécharger le fichier" aria-label="Cliquer pour télécharger le fichier" target="_blank"><img v-if="fileInfo" @click="onPickFile" :src="fileUrl" :alt="fileInfo.name" onerror="this.style.display='none';" /></a>
      </div>
      <div v-if="currentFileInfo">
        <span v-if="fileUrl">
          <a :href="fileUrl" title="Cliquer pour télécharger le fichier" aria-label="Cliquer pour télécharger le fichier" target="_blank">{{ fileInfo.name }}</a>
        </span>
        <span v-else>
          {{ currentFileInfo.name }}
        </span>
        <small class="help-block">
          {{ humanFileSize(currentFileInfo.size) }}
        </small>
        <Button
          icon="pen"
          class="icon unstyled"
          @click="onPickFile"
          type="button"
          :label="editLabel"
          :showLabel="false"
        >
        </Button>
        <Button v-if="props.fileInfo && props.fileInfo.id"
          icon="trash-alt"
          class="icon unstyled"
          @click="onDeleteClicked"
          type="button"
          :label="deleteLabel"
          :showLabel="false"
        >
        </Button>
      </div>
    </div>
    <Button
      v-else
      icon="pen"
      class="btn btn-info"
      @click="onPickFile"
      type="button"
      :label="downloadLabel"
      :showLabel="true"
    >
    </Button>
    <input
      type="file"
      :name="nameRef"
      style="display: none"
      ref="fileInputRef"
      accept="image/*"
      @change="onFilePicked"
    />
    <small class='help-block' v-if="description || maxSize">
      <span v-if="description" v-html="description"></span>
      <br v-if="description && maxSize"/>
      Taille maximale : {{ humanFileSize(maxSize) }}
    </small>
    <FieldErrorMessage
      v-if="meta.touched && !!errorMessage"
      :message="errorMessage"
    />
  </div>
</template>
